<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="renderer" content="webkit">
    <title>[[${bargain.title}]]九宫格活动</title>
    <meta name="keywords" content="LZY管理系统首页">
    <meta name="description" content="LZY管理系统首页">
	<meta content="yes" name="apple-mobile-web-app-capable"></meta>
	<meta content="black" name="apple-mobile-web-app-status-bar-style"></meta>
	<meta name="format-detection" content="telephone=no"></meta>
	<meta content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport"></meta>
	<meta content="yes" name="full-screen"></meta>
	<meta content="true" name="x5-fullscreen"></meta>
	<meta content="application" name="browsermode"></meta>
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
    <!-- <link th:href="@{favicon.ico}" rel="stylesheet"/> -->
    <link th:href="@{/css/font-awesome.min.css}" rel="stylesheet"/>
    <link th:href="@{/content/jiugongge/css/style.css}"  rel="stylesheet" />
    <style type="text/css">
               /* music */
            @-webkit-keyframes reverseRotataZ{
                0%{-webkit-transform: rotateZ(0deg);}
                100%{-webkit-transform: rotateZ(-360deg);}
            }
            @-webkit-keyframes rotataZ{
                0%{-webkit-transform: rotateZ(0deg);}
                100%{-webkit-transform: rotateZ(360deg);}
            }
            #musicControl { position:fixed;left:20px;top:20px;margin-top:0;display:inline-block;z-index:99999999}
            #musicControl a { display:inline-block;width: 25px; height: 25px;overflow:hidden;background:url('/content/jiugongge/img/mcbg.png') no-repeat;background-size:100%;}
            #musicControl a audio{width:100%;height:56px;}
            #musicControl a.stop { background-position:left bottom;}
            #musicControl a.on { background-position:0px 1px;-webkit-animation: reverseRotataZ 1.2s linear infinite;}
            #music_play_filter{width:100%;height:100%;overflow:hidden;position:fixed;top:0;left:0;z-index:99999998;}
            
            button{width:100%;text-align:center;border-radius:3px;}
.button2{font-size:16px;padding:8px 0;border:1px solid #adadab;color:#000000;background-color: #e8e8e8;background-image:linear-gradient(to top, #dbdbdb, #f4f4f4);background-image:-webkit-gradient(linear, 0 100%, 0 0, from(#dbdbdb),to(#f4f4f4));box-shadow: 0 1px 1px rgba(0,0,0,0.45), inset 0 1px 1px #efefef; text-shadow: 0.5px 0.5px 1px #ffffff;}
.button2:active{background-color: #dedede;background-image: linear-gradient(to top, #cacaca, #e0e0e0);background-image:-webkit-gradient(linear, 0 100%, 0 0, from(#cacaca),to(#e0e0e0));}
#mess_share{margin:15px 0;}
#share_1{float:left;width:49%;}
#share_2{float:right;width:49%;}
#mess_share img{width:22px;height:22px;}
#cover{display:none;position:absolute;left:0;top:0;z-index:18888;background-color:#000000;opacity:0.7;}
#guide{display:none;position:absolute;right:18px;top:5px;z-index:19999;}
#guide img{width:260px;height:180px;}
    
    </style>

</style>
    
 <!--    gt：great than（大于）>
	ge：great equal（大于等于）>=
	eq：equal（等于）==
	lt：less than（小于）<
	le：less equal（小于等于）<=
	ne：not equal（不等于）!= -->
</head>
<body>
<div th:if="${errortip} != null">
   <p th:text="${errortip}"></p>
</div>

<div id="mcovear" class="pop" style="display:none;"><div class="promptbox">
	<div class="box"><h1><span id="sncode"></span></h1>
		<div class="line"><img th:src="@{/content/jiugongge/img/line_yellow.png}" width="100%" /></div>
			<div class="user">
				<div class="input"><input type="text" id="username" placeholder="请认真输入姓名" /> </div>
				<div class="input id"> <input type="text" id="tel" placeholder="请输入手机号" /></div>
				<div class="input"> <input type="text" id="address" placeholder="请输入地址" /></div>
				<input name="recordId"  id="recordId" type="hidden">
				<div class="but_con"  >
					<button onclick="sendtel()" class="button_01 but">领奖</button><button class="button_02 but"  onclick="document.getElementById('mcovear').style.display='none';"  style="margin-left:18%">关闭</button>
					<div class="clr"></div>
				</div>
			</div>
		</div>
	</div>
</div>
<!--分割线  -->
<div id="dh" class="pop" style="display:none;">
	<div class="promptbox">
		<div class="box"><h1>申请兑换</h1>
			<div class="line"><img th:src="@{/content/jiugongge/img/line_yellow.png}" width="100%" /></div>
			<div class="user">
				<img th:src="@{/content/jiugongge/img/cat_01.png}"  width="60px" class="left"  />
				<div style="margin-left:70px;">
					<div class="input_01 input"><input type="text" id="parssword" value="" /></div>
					<div class="clr"></div>
				</div>		
			    <div class="but_con"  >
					<button   onclick="ckpass()"  class="button_01 but">确定</button><button class="button_02 but" onclick="document.getElementById('dh').style.display='none';" style="margin-left:18%">关闭</button>
					<div class="clr"></div>
				</div>
			</div>
		</div>
	</div>
</div>
<!--分割线  -->
<div id="ydh"  class="pop"  style="display:none;">
	<div class="promptbox">
		<div class="box"><h1 id="">奖品已兑换</h1>
			<div class="line"><img th:src="@{/content/jiugongge/img/line_yellow.png}" width="100%" /></div>
			<div class="user">
				<img th:src="@{/content/jiugongge/img/cat_02.png}"  width="70" class="left"  />
				<div class="text"><span id="">
					<!-- $!{dictTool.getSysText('index.tip.ylj',$!{bargain.id})} -->66666666</span><div class="clr"></div>
				</div>					
				<div class="but_con"  >
					<button class="button_01" onclick="document.getElementById('ydh').style.display='none';">知道啦</button>
					<div class="clr"></div>
				</div>
			</div>
		</div>
	</div>
</div>
<!--分割线  -->
<div id="zjl"  class="pop" style="display:none;">
	<div class="promptbox">
		<div class="box"><h1>恭喜您,中奖啦</h1>
			<div class="line"><img th:src="@{/content/jiugongge/img/line_yellow.png}" width="100%" /></div>
			<div class="user">
				<img  id="jpimg" th:src="@{/content/jiugongge/img/cat_02.png}"   width="45%" class="left"  />
				<div class="text" style="margin-left:50%; ">
					<span  id="jptype"></span><br />
					<span id="jpname"></span><br />
					<img  th:src="@{/content/jiugongge/img/line_yellow.png}" width="120"/>
					<div class="clr"></div>
				</div>
				<div class="but_con"  >				 
				   <button class="button_01 but" onclick="lq()">领奖</button>
				   <button class="button_02 but" style="margin-left:18%" onclick="document.getElementById('zjl').style.display='';">关闭</button>
				   <div class="clr"></div>
				</div>
			</div>
		</div>
	</div>
</div>
<!--分割线  -->
<div id="mzj"  class="pop"  style="display:none;">
	 <div class="promptbox">
		<div class="box"><h1 id="hyh">很遗憾没抽中</h1>
			<div class="line"><img th:src="@{/content/jiugongge/img/line_yellow.png}" width="100%" /></div>
			<div class="user">
				<img th:src="@{/content/jiugongge/img/cat_02.png}"  width="70" class="left"  />
				<div class="text">
					<span id="ncz">没抽中任何奖品,请继续!</span><div class="clr"></div>
				</div>		
				<div class="but_con"  >
					<button class="button_01" onclick="document.getElementById('mzj').style.display='';">知道啦</button>
					<div class="clr"></div>
				</div>
			</div>
		</div>
	</div>
</div>




<!--分割线  -->
<div class="container" id="lottery" th:if="${errortip} == null">
	<div class="NO">
		<ul> 
		<!-- onload="javascript:$(this).height($(this).width());" -->
 			<li class="lottery-unit lottery-unit-0"><span></span><img th:src="${prizeMap['prizeImg1']}" width="99%" /></li>
			<li class="lottery-unit lottery-unit-1"><span></span><img th:src="${prizeMap['prizeImg6']}" width="99%" /></li>
			<li class="lottery-unit lottery-unit-2"><span></span><img th:src="${prizeMap['prizeImg4']}"   width="99%" /></li> 
			<li class="lottery-unit lottery-unit-7"><span></span><img th:src="@{/content/jiugongge/img/ths.png}"  /></li>
			<li><a href="javascript:jiugong();"><img th:src="@{/content/jiugongge/img/start.jpg}"  style="cursor:pointer;" /></a></li>
			<li class="lottery-unit lottery-unit-3"><span></span><img th:src="@{/content/jiugongge/img/ths.png}" /></li>
			<li class="lottery-unit lottery-unit-6"><span></span><img th:src="${prizeMap['prizeImg3']}"  width="99%"/></li>
			<li class="lottery-unit lottery-unit-5"><span></span><img th:src="${prizeMap['prizeImg5']}"  width="99%"/></li>
			<li class="lottery-unit lottery-unit-4"><span></span><img th:src="${prizeMap['prizeImg2']}"  width="99%"/></li>
			<div class="clr"></div>
		</ul>
	</div>
	<div>欢迎光临！！<img  class="logo" th:src="${weixinDto.headimgurl}"> [[${weixinDto.nickname}]]</div>
    <img th:src="@{/content/jiugongge/img/bg.jpg}" class="img"/>
    <div id="music">
		<span id="musicControl">
		 <a id="mc_play" class="on" onclick="play_music()" style="height: 50px;width: 50px">
		     <audio loop src="https://mc-1256137143.cos.ap-guangzhou.myqcloud.com/%E8%BD%AE%E6%92%AD%E5%9B%BE/fc/5417e3ba4295f.mp3" id="audio" autoplay preload="auto">该浏览器不支持audio属性</audio>
		 </a>
		 </span>
    </div>
    <div class="list">
	<div id="mess_share">
		<div id="share_1">
			<button class="button2" onclick="_system._guide(true)">
			<img th:src="@{/content/jiugongge/img/icon_msg.png}">&nbsp;发送给朋友</button>
		</div>
		<div id="share_2">
<button class="button2" onclick="_system._guide(true)">
			<img  th:src="@{/content/jiugongge/img/icon_timeline.png}">&nbsp;分享到朋友圈</button>
		</div>
		<div class="clr"></div>
	</div>
</div>
</div>
<!--分割线  -->
<div class="content" th:if="${errortip} == null">
	<div  th:if="${bargain.count ne 0}"  class="title"><img th:src="@{/content/jiugongge/img/title_1.png}" /></div><div class="text">本次活动每人可抽[[${bargain.count}]]次。 您还有<span id="num">[[${bargain.count - registration.awardsNum}]]</span>次机会</div>
	<div class="title"><img th:src="@{/content/jiugongge/img/title_1.png}" /></div>
	<div class="text" th:if="${perday ne 0}">本次活动 每天可抽[[${bargain.numPerDay}]]次，您今天还有<span id="count">[[${bargain.numPerDay - weixinDto.numberDay}]]</span>次机会</div>
    <div class="text" th:if="${perday eq 0}">本次活动不限制每天可抽次数</div>
	
	<div class="title"><img th:src="@{/content/jiugongge/img/title_2.png}" /></div>
	<div class="text" id="content"></div>
	<div class="title"><img th:src="@{/content/jiugongge/img/title_3.png}" /></div>
	<div class="prize text">
		<ul th:each="prize,userStat : ${prizeList}">
        <!--list-->
        	<li><div class="jiangpin"><img th:src="${prize.img}" style="height: 100px;height: 100px"/><span>[[${prize.awardsName}]]</span></div><p>[[${prize.name}]]</p></li>
        	<!-- <img th:src="#if($!prize.img.indexOf('content')==0)$!{basePath}/$!prize.img#else $!{basePath}/upload/img/jiugongge/$!{weixinDto.jwid}/$!prize.img#end"/> -->
        <!--list end-->		
		</ul>
	</div>
    <div class="line"><img th:src="@{/content/jiugongge/img/line.png}"></div>
	<div style="height:.5rem">
    </div>
</div>

<input type="hidden" name="actId" id="actId" th:value="${bargain.id}"/>
<input type="hidden" name="openid" id="openid" th:value="${weixinDto.openid}"/>
<input type="hidden" name="nickname" id="nickname" th:value="${weixinDto.nickname}"/>
<input type="hidden" name="jwid" id="jwid" th:value="${weixinDto.jwid}"/>
<input type="hidden" name="appid" id="appid" th:value="${weixinDto.appid}"/>



<div id="cover"></div>
<div id="guide"><img th:src="@{/content/jiugongge/img/guide1.png}"></div>




</body>
<!-- 全局js -->
<script th:src="@{/content/jiugongge/js/jquery.min.js}"></script>
<!-- <script th:src="@{/content/jiugongge/js/jquery.js}"></script> -->
<script th:src="@{/content/jiugongge/js/common.js}"></script>
<script th:src="@{/content/jiugongge/js/wxcheck.js}"></script>
<script th:src="@{http://res.wx.qq.com/open/js/jweixin-1.0.0.js}"></script>
<script th:inline="javascript"> 
    var ctx = [[@{/}]];
	$().ready(function() {
		var content = [[${bargain.description}]];
		$("#content").html(content);
	});
</script>
<script th:inline="javascript">
	 wx.config({
        debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
        appId: [[${weixinDto.appid}]], // 必填，公众号的唯一标识
        timestamp: [[${timestamp}]], // 必填，生成签名的时间戳
        nonceStr: [[${nonceStr}]], // 必填，生成签名的随机串
        signature: [[${signature}]],// 必填，签名，见附录1【必填：通过提供接口获取】
        jsApiList: [
				'onMenuShareTimeline', 
				'onMenuShareAppMessage',
				'onMenuShareQQ', 
				'onMenuShareQZone'
    	        ]
         // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
    });
    wx.ready(function () {
		var newHdUrl = [[${hdUrl}]];
		//微信朋友圈
 	    wx.onMenuShareTimeline({
            title: [[${bargain.title}]], // 分享标题【必填】
            link: newHdUrl, // 分享链接【必填】
            imgUrl: [[${bargain.shortUrl}]], // 分享图标【必填】
            success: function () { 
                // 用户确认分享后执行的回调函数
                alert('分享成功');
                var count_times = $("#count").html();
                count_times++;
                $("#count").html(count_times);
            },
            cancel: function () { 
                // 用户取消分享后执行的回调函数
                
            }
        });
        
	    //微信好友
        wx.onMenuShareAppMessage({
            title: [[${bargain.title}]], // 分享标题【必填】
            desc: [[${bargain.banner}]], // 分享描述【必填】
            link: newHdUrl, // 分享链接【必填】
            imgUrl: [[${bargain.shortUrl}]], // 分享图标【必填】
            type: 'link', // 分享类型,music、video或link，不填默认为link【必填】
            dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
            success: function () { 
                // 用户确认分享后执行的回调函数
				alert('已分享,增加一次抽奖机会');
            },
            cancel: function () { 
                // 用户取消分享后执行的回调函数
				 alert('已取消');
            }
        });
        
        //qq
        wx.onMenuShareQQ({
          title: [[${bargain.title}]], // 分享标题
          desc: '这个活动66666666', // 分享描述
          link: newHdUrl, // 分享链接
          imgUrl: 'https://micromart.oss-cn-beijing.aliyuncs.com/timg.jpg', // 分享图标
          success: function() {
            // 用户确认分享后执行的回调函数
          },
          cancel: function() {
            // 用户取消分享后执行的回调函数
          }
        });
        // qq空间
        wx.onMenuShareQZone({
        	title: [[${bargain.title}]], // 分享标题
            desc: '这个活动66666666', // 分享描述
            link: newHdUrl, // 分享链接
            imgUrl: 'https://micromart.oss-cn-beijing.aliyuncs.com/timg.jpg', // 分享图标
          success: function() {
            // 用户确认分享后执行的回调函数
          },
          cancel: function() {
            // 用户取消分享后执行的回调函数
          }
        });
        

  	});
	 
</script>
<script>
    //var src = "music/5417e3ba4295f.mp3";
    // 初始化Aduio
    var audio = document.getElementById('audio');
    var shakingAudio = document.getElementById('shakingAudio');
    var shakingResult = document.getElementById('shakingResult');
    // audio.src = src;

    function play_music() {
        if(audio.paused){
            audio.play();
            $('#mc_play').attr('class','on');
        }else{
            audio.pause();
            $('#mc_play').attr('class','stop');
        }
        // 音频文件
    }

    var a = 0;
    var b = 0;
    var c = 0;
    $('#body').on('touchstart',function(){
        if (a==0){
           var pormise = audio.play();
            pormise.then(function () {
            }).catch(function (e) {
                console.info('正在加载...')
            })
            if (!audio.paused){


                a++
            }
        }
        if (b==0){
            var pormise = shakingAudio.play();
            pormise.then(function () {
            }).catch(function (e) {
                console.info('正在加载...')
            });
            if (!shakingAudio.paused){
                shakingAudio.setAttribute('src', 'http://fc.slmimi.com/music/5018.mp3');
                shakingAudio.load();
                b++
            }

        }
        if (c==0){

            var pormise = shakingResult.play();
            pormise.then(function () {
            }).catch(function (e) {
                console.info('正在加载...')
            });
            if (!shakingResult.paused){
                shakingResult.setAttribute('src', 'http://fc.slmimi.com/music/5012.mp3');
                shakingResult.load();
                c++
            }
        }

    });


        //shakingAudio.setAttribute('src', 'http://fc.slmimi.com/music/5018.mp3');
        //shakingAudio.load();
        //shakingResult.setAttribute('src', 'http://fc.slmimi.com/music/5012.mp3');
        //shakingResult.load();

</script>
<script type="text/javascript">
    var _system={
         $$:function(id){return document.getElementById(id);},
   _client:function(){
      return {w:document.documentElement.scrollWidth,h:document.documentElement.scrollHeight,bw:document.documentElement.clientWidth,bh:document.documentElement.clientHeight};
   },
   _scroll:function(){
      return {x:document.documentElement.scrollLeft?document.documentElement.scrollLeft:document.body.scrollLeft,y:document.documentElement.scrollTop?document.documentElement.scrollTop:document.body.scrollTop};
   },
   _cover:function(show){
      if(show){
     this.$$("cover").style.display="block";
     this.$$("cover").style.width=(this._client().bw>this._client().w?this._client().bw:this._client().w)+"px";
     this.$$("cover").style.height=(this._client().bh>this._client().h?this._client().bh:this._client().h)+"px";
  }else{
     this.$$("cover").style.display="none";
  }
   },
   _guide:function(click){
      this._cover(true);
      this.$$("guide").style.display="block";
      this.$$("guide").style.top=(_system._scroll().y+5)+"px";
      window.onresize=function(){_system._cover(true);_system.$$("guide").style.top=(_system._scroll().y+5)+"px";};
  if(click){_system.$$("cover").onclick=function(){
         _system._cover();
         _system.$$("guide").style.display="none";
 _system.$$("cover").onclick=null;
 window.onresize=null;
  };}
   },
   _zero:function(n){
      return n<0?0:n;
   }
}
</script>


</body>
</html>
